<template>
	<div>
		<html2canvas class="canvas" ref="canvas" :domId="domId" @renderFinish="renderFinish">
			<view id="poster" @click="show = false">
				<div style="width: 100%;height: 100%;display: block;background-color: red;"></div>
				<block  v-if="!isCollection">
					<div class="top-right-box">
						<div class="top-right-box-flex">
							<img src="@/static/img/ready.png" mode="" style="width: 4.27vw;height: 4.27vw;"></img>
							<span>开售时间</span>
						</div>
						<span class="top-right-box-time">{{startTime}}</span>
					</div>
					<img class="bgImg" src="@/static/img/poster.png" mode="widthFix"></img>
				</block>
				<div class="img-box">
					<img class="logo" :src="info.info.cover" mode="aspectFill"></img>
					<div class="num-box" v-if="isCollection">
						<!-- <div class="num-box-left num">NUM</div> -->
						<img src="@/static/img/num.png" alt="" style="width: 8.8vw;height: 4.27vw;">
						<div class="num-box-right">{{ collectionInfo.collection.nftItemIdV }}/{{ info.info.nftMaxSupply }}</div>
					</div>
					<div class="num-box" v-else>
						<img class="num-box-left-img" src="@/static/img/indexTitle.png" mode="heightFix"></img>
						<div class="num-box-right" style="display: inline-block;width: 100%;">{{info.info.nftMaxSupply}}份</div>
					</div>
				</div>
				<div class="bottom-box">
					<div class="top">
						<div class="gradient"></div>
						<div class="column">
							<span class="title">{{info.info.spuTitle}}</span>
							<div class="tagList" v-if="info.info.tags">
								<span class="tag" v-for="label in info.info.tags.split(',')">{{label}}</span>
							</div>
						</div>
					</div>
					<div class="line">
						<div class="dashed"></div>
					</div>
					<div class="bottom">
						<div class="bottom-column" v-if="isCollection">
							<div class="row">
								<span class="nickname">{{ collectionInfo.user.nickname }}</span>
								<span class="label">持有者</span>
							</div>
							<p>合约地址：</p>
							<p style="width: 53.33vw;overflow: hidden;text-overflow: ellipsis;">{{ collectionInfo.collection.nftContractAddress }}</p>
						</div>
						<div v-else class="bottom-column">
							<span class="nickname">九歌灵藏</span>
							<p class="label">人人都是数字艺术收藏家，快来搭建你的数字藏馆吧！</p>
						</div>
						<img class="avatar" :src="qrcodeImg" mode="aspectFill"></img>
					</div>
				</div>
			</view>
		</html2canvas>

		<div class="mask" v-if="show" @click="show = false">
			<div class="modal" >
				<img class="canvasImg" :src="canvasImg" mode="widthFix" @tap.stop="show = true"></img>
				<div class="button-box">
					<div class="flex-row">
						<!-- <div class="flex-column">
							<image src="@/static/img/wechat.png" mode=""></image>
							<span>微信好友</span>
						</div> -->
						<div class="flex-column" @tap.stop="save">
							<image src="@/static/img/save.png" mode=""></image>
							<span>长按上图保存图片</span>
						</div>
						<div class="flex-column" @tap="onCopy">
							<image src="@/static/img/copy.png" mode=""></image>
							<span>复制链接</span>
						</div>
					</div>
					<!-- <div class="cancel-box">
						<div class="cancel-button" @click="show = false">取消</div>
					</div> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		base64ToPath,
		pathToBase64
	} from '@/components/html2canvas/image-tools.js';
	export default {
		props: {
			spuId: {
				type: String,
				default: null
			},
			info: {
				type: Object,
				default: null
			},
			//是否是藏品
			isCollection: {
				type: Boolean,
				default: false
			},
			collectionInfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				coverImg: '',
				domId: '',
				show: false,
				canvasImg: '',
				qrcodeImg: ''
			}
		},
		methods: {
			renderFinish(filePath) {
				console.log(filePath)
				this.canvasImg = filePath;
			},
			getShareUrl() {
				let baseUrl = 'https://www.jiugemeta.com/#/subPackA/pages/detail/detail';
				let query = `?detailType=${this.isCollection ? 'my' : ''}&spuId=${this.spuId}&collectionId=${this.isCollection ? this.collectionInfo.collectionId : ""}`;
				// 
				return baseUrl + query;
			},
			async getQrcode() {
				if (this.qrcodeImg) return;
				let res = await this.$u.api.getQrcode({
					content: this.getShareUrl()
				})
				this.qrcodeImg = res.msg;
			},
			save(){
				uni.showToast({
					icon: 'none',
					title: '请长按上图保存图片'
				});
				return;
			},
			async open() {
				if (this.canvasImg) this.show = true;
				else {
					uni.showLoading({
						title: '生成中...'
					})
					await this.getQrcode();
					try {
						const imgInfo0 = await uni.getImageInfo({
							// src: "/static/img/loginBg.jpg"
							src: this.coverImg
						});
						const imgInfo1 = await uni.getImageInfo({
							// src: "/static/img/swiper.jpg"
							src: this.qrcodeImg
						})
						const qrcodeImg = await pathToBase64(imgInfo1[1].path);
						const coverImg = await pathToBase64(imgInfo0[1].path);
						this.qrcodeImg = qrcodeImg.base64ToPath();
						this.coverImg = coverImg.base64ToPath();
					} catch (e) {
						//TODO handle the exception
					}
					await this.$refs.canvas.create(this.domId);
					setTimeout(() => {
						uni.hideLoading()
						this.show = true;
					}, 500)
				}
			},
			onCopy() {
				this.$ma.utils.onCopy(this.getShareUrl())
			},
			onFormat(num) {
				if(num > 10) return `${num}`;
				else return `0${num}`;
			}
		},
		async mounted() {
			this.domId = '#poster';
			await this.getQrcode();
		},
		watch: {
			info: {
				handler: function(val) {
					if (val.info) {
						this.coverImg = val.info.cover || val.info.coverV1;
					}
				},
				deep: true
			}
		},
		computed: {
			startTime() {
				if(this.info) {
					let time = this.info.limitTime.info.startTime.replace(/-/g,'/').slice(5,16);
					// let date = new Date(time.replace(/-/g,'/'))
					// const month = this.onFormat(date.getMonth() + 1);
					// const day = this.onFormat(date.getDate());
					// const hour = this.onFormat(date.getHours());
					// const minute = this.onFormat(date.getMinutes());
					return time;
				}else return '';
			}
		}
	}
</script>

<style lang="scss">
	
	.num-box-right{
		padding: 0.27vw 1.07vw;
		background-color: #323232;
		display: block;
	}
	#poster {
		width: 82.93vw;
		// height: 128.27vw;
		border-radius: 6.4vw;
		background-color: #1B1B1B;
		margin-left: 8.53vw;
		position: relative;

		.bgImg {
			width: 100%;
			// height: 124vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
		}

		.img-box {
			width: 100%;
			padding: 2.13vw 2.13vw 0;
			height: 85.07vw;
			position: relative;
			border-radius: 6.4vw;

			.logo {
				width: 100%;
				height: 100%;
				border-radius: 6.4vw;
				background-color: #BBB;
			}
			.logoTwo{
				width: 91.47vw;
			}

			.num-box {
				display: flex;
				align-items: center;
				height: 4.27vw;
				border-radius: 1.07vw;
				position: absolute;
				left: 4.27vw;
				bottom: 6.4vw;
				// width: 100%;
				
				&-left-img {
					height: 100%;
				}
				
				&-left {
					width: 10vw;
					height: 100%;
					font-size: 3.47vw;
					border-radius: 1.07vw;
					display: flex;
					align-items: center;
					justify-content: center;
					// background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
					font-weight: 900;
				}

				&-right {
					width: 10vw;
					font-size: 2.67vw;
					color: #FFCE80;
					padding: 0.27vw 1.07vw;
					background-color: #232323;
					text-align: center;
					border-radius: 0 1.07vw 1.07vw 0;
				}
			}
		}

		.bottom-box {
			width: 100%;
			padding: 4.27vw 6.4vw;
			position: relative;
			z-index: 9999;
			overflow: hidden;

			.top {
				display: flex;
				align-items: center;
				height: 11.2vw;

				.gradient {
					width: 1.07vw;
					height: 11.2vw;
					background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
					border-radius: 12.8vw;
					margin-right: 2.14vw;
				}

				.column {
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 4.27vw;
						color: #FFF;
						font-weight: 500;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width: 60vw;
					}
					
					.tagList {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						.tag {
							margin-top: 1.07vw;
							font-size: 2.67vw;
							color: #A972FF;
							border: 1px solid #A972FF;
							border-radius: 1.07vw;
							padding: 0.27vw 1.07vw;
							margin-right: 1.07vw;
							display: block;
						}
					}
				}
			}

			.line {
				padding: 4.27vw 0;
				width: 82.93vw;
				// overflow: hidden;
				position: relative;
				left: -6.4vw;

				&:after {
					content: '';
					height: 4.27vw;
					width: 4.27vw;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #000;
				}

				&:before {
					content: '';
					height: 4.27vw;
					width: 4.27vw;
					border-radius: 50%;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(50%, -50%);
					background-color: #000;
				}

				.dashed {
					background: linear-gradient(to left,
							transparent 0%,
							transparent 50%,
							#000 50%,
							#000 100%);
					background-size: 18px 1px;
					background-repeat: repeat-x;
					width: 100%;
					height: 1px;
				}
			}

			.bottom {
				display: flex;

				// align-items: center;
				// justify-content: space-between;
				&-column {
					flex: 1;
					flex-direction: column;
					overflow: hidden;
					margin-right: 4vw;

					.row {
						display: flex;
						align-items: center;

						.label {
							font-size: 2.67vw;
							color: #FFCE80;
							border: 1px solid #FFCE80;
							border-radius: 1.07vw;
							padding: 0.27vw 1.33vw;
							margin-left: 1.07vw;
						}
					}
					.nickname {
						font-size: 3.73vw;
						font-weight: 500;
						color: #aaa;
						width: 26.2vw;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					p {
						font-size: 3.2vw;
						color: #535353;
						margin-top: 0.53vw;
					}
				}

				.avatar {
					width: 14.93vw;
					height: 14.93vw;
					border-radius: 1.6vw;
					background-color: #BBB;
				}
			}
		}
	}

	.canvas {
		position: fixed;
		left: 99999px;
		// left: 0;
		top: 0;
		z-index: 999999;
		background-color: #000;
	}

	.canvasImg {
		transform: scale(2);
		width: 43vw;
		display: block;
		// margin-bottom: 3.73vw;
		margin-bottom: 10.67vw;
		border-radius: 3.2vw;
		background-color: #000;
		z-index: 4;
		border: 1px solid #1b1b1b;
		position: absolute;
		top: 37vw;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100vh;
		width: 100vw;
		background-color: #000;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.modal {
			display: flex;
			flex-direction: column;
			align-items: center;

			.button-box {
				padding-top: 4.27vw;
				border-radius: 6.4vw 6.4vw 0 0;
				background-color: #1B1B1B;
				width: 100%;
				display: flex;
				flex-direction: column;

				.flex-row {
					display: flex;
					align-items: center;
					padding: 0 14.93vw;
					justify-content: space-between;
					padding-top: 2.13vw;
					padding-bottom: calc(4.27vw + constant(safe-area-inset-bottom));
					padding-bottom: calc(4.27vw + env(safe-area-inset-bottom));
				}

				.flex-column {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						height: 14.93vw;
						width: 14.93vw;
					}

					span {
						font-size: 3.2vw;
						color: #FFF;
						margin-top: 1.33vw;
					}
				}

				.cancel-box {
					width: 100%;
					box-sizing: content-box;
					height: 17.07vw;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);
					display: flex;
					align-items: center;
					justify-content: center;

					.cancel-button {
						width: 89.33vw;
						height: 12.8vw;
						font-size: 3.73vw;
						color: #555;
						background-color: #000;
						border-radius: 6.4vw;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
	.top-right-box {
		height: 15.47vw;
		width: 30.4vw;
		position: absolute;
		right: 2.13vw;
		top: 0;
		z-index: 9999999999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&-flex {
			display: flex;
			align-items: center;
			font-size: 3.2vw;
			color: #AAA;
			font-weight: 300;
			image {
				height: 4.27vw;
				width: 4.27vw;
				margin-right: 1.07vw;
			}
		}
		&-time {
			font-size: 3.2vw;
			color: #FFCE80;
			font-weight: 500;
		}
	}
	.num{
		padding: 0vw 1.07vw 0 1.07vw;
		background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
		border-radius: 1.07vw;
		font-size: 3.47vw;
		font-weight: blod;
	}
</style>
